<script lang="ts" setup>
import { ref } from 'vue'

const display = ref('0')
const previousValue = ref(0)
const operation = ref('')
const waitingForOperand = ref(false)

function inputNumber(num: string) {
  if (waitingForOperand.value) {
    display.value = num
    waitingForOperand.value = false
  } else {
    display.value = display.value === '0' ? num : display.value + num
  }
}

function inputOperation(nextOperation: string) {
  const inputValue = parseFloat(display.value)

  if (previousValue.value === 0) {
    previousValue.value = inputValue
  } else if (operation.value) {
    const currentValue = previousValue.value || 0
    const newValue = calculate(currentValue, inputValue, operation.value)

    display.value = String(newValue)
    previousValue.value = newValue
  }

  waitingForOperand.value = true
  operation.value = nextOperation
}

function calculate(firstValue: number, secondValue: number, operation: string): number {
  switch (operation) {
    case '+':
      return firstValue + secondValue
    case '-':
      return firstValue - secondValue
    case '×':
      return firstValue * secondValue
    case '÷':
      return firstValue / secondValue
    case '=':
      return secondValue
    default:
      return secondValue
  }
}

function performCalculation() {
  const inputValue = parseFloat(display.value)

  if (previousValue.value !== 0 && operation.value) {
    const currentValue = previousValue.value || 0
    const newValue = calculate(currentValue, inputValue, operation.value)

    display.value = String(newValue)
    previousValue.value = 0
    operation.value = ''
    waitingForOperand.value = true
  }
}

function clear() {
  display.value = '0'
  previousValue.value = 0
  operation.value = ''
  waitingForOperand.value = false
}

function inputDecimal() {
  if (waitingForOperand.value) {
    display.value = '0.'
    waitingForOperand.value = false
  } else if (display.value.indexOf('.') === -1) {
    display.value += '.'
  }
}

function deleteLast() {
  if (display.value.length > 1) {
    display.value = display.value.slice(0, -1)
  } else {
    display.value = '0'
  }
}
</script>

<template>
  <div class="calculator">
    <div class="display">
      <div class="display-value">{{ display }}</div>
    </div>
    
    <div class="buttons">
      <button class="btn btn-clear" @click="clear">C</button>
      <button class="btn btn-operation" @click="deleteLast">⌫</button>
      <button class="btn btn-operation" @click="inputOperation('÷')">÷</button>
      <button class="btn btn-operation" @click="inputOperation('×')">×</button>
      
      <button class="btn btn-number" @click="inputNumber('7')">7</button>
      <button class="btn btn-number" @click="inputNumber('8')">8</button>
      <button class="btn btn-number" @click="inputNumber('9')">9</button>
      <button class="btn btn-operation" @click="inputOperation('-')">-</button>
      
      <button class="btn btn-number" @click="inputNumber('4')">4</button>
      <button class="btn btn-number" @click="inputNumber('5')">5</button>
      <button class="btn btn-number" @click="inputNumber('6')">6</button>
      <button class="btn btn-operation" @click="inputOperation('+')">+</button>
      
      <button class="btn btn-number" @click="inputNumber('1')">1</button>
      <button class="btn btn-number" @click="inputNumber('2')">2</button>
      <button class="btn btn-number" @click="inputNumber('3')">3</button>
      <button class="btn btn-equals" @click="performCalculation" rowspan="2">=</button>
      
      <button class="btn btn-number btn-zero" @click="inputNumber('0')">0</button>
      <button class="btn btn-number" @click="inputDecimal">.</button>
    </div>
  </div>
</template>

<style scoped>
.calculator {
  max-width: 320px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.display {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: right;
}

.display-value {
  font-size: 2.5em;
  font-weight: 300;
  color: #fff;
  min-height: 1.2em;
  word-wrap: break-word;
  word-break: break-all;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.btn {
  height: 60px;
  border: none;
  border-radius: 8px;
  font-size: 1.2em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #fff;
}

.btn-number {
  background: rgba(255, 255, 255, 0.15);
}

.btn-number:hover {
  background: rgba(255, 255, 255, 0.25);
}

.btn-operation {
  background: rgba(255, 165, 0, 0.8);
}

.btn-operation:hover {
  background: rgba(255, 165, 0, 1);
}

.btn-clear {
  background: rgba(255, 59, 48, 0.8);
}

.btn-clear:hover {
  background: rgba(255, 59, 48, 1);
}

.btn-equals {
  background: rgba(255, 165, 0, 0.8);
  grid-row: span 2;
}

.btn-equals:hover {
  background: rgba(255, 165, 0, 1);
}

.btn-zero {
  grid-column: span 2;
}

.btn:active {
  transform: scale(0.95);
}
</style>